<template>
  <up-popup :show="showProduct" @close="closeProduct">
  	<view class="picker">
  		<view class="picker-title">商品选择</view>
			<view class="picker-search-form">
				<uni-forms class="picker-search-form-flex" ref="searchRef" :modelValue="searchModel">
					<uni-forms-item>
						<uni-easyinput v-model="searchModel.name" placeholder="请输入商品名称" />
					</uni-forms-item>
					<uni-forms-item>
						<view class="picker-search-footer main-flex">
							<up-button
								class="picker-search-footer-item"
								type="primary"
								@click="searchSubmit"
								text="搜索"
								icon="search"></up-button>
							<up-button
								class="picker-search-footer-item"
								@click="resetSubmit"
								text="重置"
								icon="reload"></up-button>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
  		<scroll-view @scrolltolower="scrolltolower" class="picker-search-box" scroll-y="true" @touchmove.stop>
  			<!--内容-->
  			<view class="table">
  				<ty-table
  					:data="tableList"
  					:columns="columns"
  					:sortable="true"
  					:selectedRowsKey="selectedRowsKey"
  					@selection-change="selectRow"
  					:cellClassName="() => 'table-cell'"
  					:headerCellClassName="() => 'table-cell'"
  					stripe
  					border>
						<template v-slot:left="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row">
									名称：
									<text class="table-td-text">{{row.name}}</text>
								</view>
								<view class="table-td-row">
									单位：
									<text class="table-td-text">{{row.unit}}</text>
								</view>
							</view>
						</template>
						<template v-slot:right="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row">
									规格标志：
									<uni-tag size="small" type="success" :text="row.moreSpec === 0 ? '单规格' : '多规格'" />
								</view>
								<view class="table-td-row">
									规格名称：
									<text class="table-td-text"></text>
								</view>
								<view class="table-td-row">
									购买单价：
									<text class="table-td-text">{{row.sellPrice}}</text>
								</view>
							</view>
						</template>
  					<template v-slot:empty>
  						<view class="table-empty">
  							<up-empty mode="data"/>
  						</view>
  					</template>
  				</ty-table>
					<uni-load-more v-show="!isNull" :status="status" />
  			</view>
  			<!--分页-->
  			<!-- <view class="picker-search-pagination" v-show="total > 0">
  				<ty-pagination
  					:total="total"
  					:pageSize="pageSize"
  					:currentPage="pageNum"
  					:pageSizes="[10, 20, 30, 50]"
  					mode="simple"
  					layout="first,prev,page,next,last"
  					@sizeChange="sizeChange"
  					@change="pageChange">
  				</ty-pagination>
  			</view> -->
  		</scroll-view>
  		<view class="picker-btns main-flex">
  			<button @click="confirmProduct" type="primary" class="picker-btns-item main-flex">确认</button>
  			<button @click="closeProduct" type="default" class="picker-btns-item main-flex">取消</button>
  		</view>
  	</view>
  </up-popup>
</template>

<script>
	import { productInfo } from "@/api/erp_api/product"
  /**
   * DataPicker 级联选择
   * @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
   * @property {String} popup-title 弹出窗口标题
   * @property {Array} localdata 本地数据，参考
   * @property {Boolean} border = [true|false] 是否有边框
   * @property {Boolean} readonly = [true|false] 是否仅读
   * @property {Boolean} preload = [true|false] 是否预加载数据
   * @value true 开启预加载数据，点击弹出窗口后显示已加载数据
   * @value false 关闭预加载数据，点击弹出窗口后开始加载数据
   * @property {Boolean} step-searh = [true|false] 是否分布查询
   * @value true 启用分布查询，仅查询当前选中节点
   * @value false 关闭分布查询，一次查询出所有数据
   * @property {String|DBFieldString} self-field 分布查询当前字段名称
   * @property {String|DBFieldString} parent-field 分布查询父字段名称
   * @property {String|DBCollectionString} collection 表名
   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
   * @property {String} orderby 排序字段及正序倒叙设置
   * @property {String|JQLString} where 查询条件
   * @event {Function} popupshow 弹出的选择窗口打开时触发此事件
   * @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
   */
  export default {
    name: 'tyProductPicker',
    emits: ['change', 'update:modelValue', 'close'],
    props: {
			showProduct: {
				type: Boolean,
				default: false
			}
    },
    data() {
      return {
				searchModel: {
					name: ''
				},
				total: 0,
				pageSize: 10,
				pageNum: 1,
				selectedRowsKey: [],
				columns: [{ type: 'selection', width: '100rpx' },
					{ title: '商品信息', key: 'left' },
					{ title: '价格单位', key: 'right' }],
				tableList: [],
				isLoading: false,
				status: 'more',
				isNull: false
      }
    },
    created() {
      this.$nextTick(() => {
        this.load();
      })
    },
    watch: {
			showProduct: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.selectedRowsKey = []
					}
				}
			}
    },
    methods: {
      load() {
        this.getList()
      },
			scrolltolower() {
				if(this.status == 'no-more') return false;
				this.pageNum += 1
				this.status = 'loading'
				this.getList()
			},
			// 选择
			selectRow(e) {
				this.selectedRowsKey = e
			},
      confirmProduct() {
				this.$emit('change', this.selectedRowsKey)
				this.closeProduct()
      },
			// 搜索
			searchSubmit() {
				this.pageNum = 1
				this.tableList  = []
				this.getList()
			},
			// 重置
			resetSubmit() {
				this.searchModel.name = ''
				this.pageNum = 1
				this.tableList  = []
				this.getList()
			},
			// 切换条数
			sizeChange(size) {
				this.pageSize = size
				this.getList()
			},
			// 切换页数
			pageChange(page) {
				this.pageNum = page
				this.getList()
			},
			// 查询商品
			getList() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				if (this.searchModel.name) {
					params.name = this.searchModel.name
				}
				this.isLoading = true
				// uni.showLoading({
				// 	title: '数据加载中...'
				// })
				productInfo(params).then(res => {
					// uni.hideLoading()
					this.tableList = this.tableList.concat(res.rows || [])
					this.total = res.total
					this.isLoading = false
					this.isNull = res.total === 0 && this.pageNum === 1 ? true : false
					this.status = res.rows.length === this.pageSize ? 'loading' : 'no-more'
				}).catch(err => {
					// uni.hideLoading()
					this.isLoading = false
					this.status = 'no-more'
				})
			},
			closeProduct() {
				this.$emit('close')
			}
    }
  }
</script>

<style lang="scss">
  .ty-city {
		position: relative;
		&-box {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			overflow: hidden;
			font-size: 12px;
			height: 35px;
			padding-left: 10px;
		}
		&-placeholder {
			color: #999;
		}
		&-clear {
			position: absolute;
			top: 50%;
			right: 0px;
			margin: 0 5px;
			margin-top: -12px;
		}
	}
</style>
